<script>
  import $ from 'dfish-widget'
  import Widget from '../Widget.vue'
  import src from '../widget.src.js'

  export default {
    mixins: [Widget],
    data() {
      return {
        name: 'Leaf',
        remark: `
          <div>Leaf节点是否有三角展开符的判定规则：</div>
          <div>&nbsp; 1. 如果有设置children参数，则有展开符</div>
          <div>&nbsp; 2. 如果没有children，但设置了src，则有展开符</div>
          `,
        extends: [src],
        attrs: [{
            name: 'text',
            type: 'String',
            remark: '文本',
          }, {
            name: 'collapsed-icon',
            type: 'String',
            remark: '折叠状态的图标',
            option: 'URL字符串，或以<var>.</var><var>#</var>开头的样式名',
          },
          {
            name: 'expanded-icon',
            type: 'String',
            remark: '展开状态的图标',
            option: 'URL字符串，或以<var>.</var><var>#</var>开头的样式名',
          }, {
            name: 'icon',
            type: 'String',
            remark: '没有下级节点时的图标',
            option: 'URL字符串，或以<var>.</var><var>#</var>开头的样式名',
          }, {
            name: 'expanded',
            type: 'Boolean',
            remark: '是否展开',
            option: '',
          }, 
          {
            name: 'br',
            type: 'Boolean | Number',
            remark: '是否换行。如果是数字，则表示最多显示的行数',
            default: ''
          },
          {
            name: 'box-sync',
            type: 'Boolean',
            remark: '是否在点击文本时，同步box的选中',
            default: ''
          },
          {
            name: 'children',
            type: 'Array | Boolean',
            remark: '子节点数据集',
            default: ''
          },
          {
            name: 'disabled',
            type: 'Boolean',
            remark: '是否禁用',
            default: ''
          },
        ],
        methods: [{
          name: 'toggle([expanded], [fn])',
          remark: '切换展开或折叠的状态',
          option: `
            <div><var>expanded</var>: Boolean 是否展开</div>
            <div><var>fn</var>: Function 展开后执行的回调函数</div>
            `,
          default: ''
        }],
        slots: [{
          name: 'box',
          remark: '复选框表单',
          option: 'w-triplebox / w-checkbox / w-radio'
        }, {
          name: 'default',
          remark: '下级子节点',
          option: 'w-leaf'
        }, {
          name: 'text',
          remark: '显示内容',
          option: ''
        }],
        computed: [{
          name: 'level',
          remark: '层级',
          type: 'Number',
          option: ''
        }]
      }
    }
  }
</script>

<style>
</style>
